<template>
  <div class="tab" ref="tab">
    <ul class="tab_content" ref="tabWrapper" style="touch-action: none;">
     <li @click="selectGood(goods.id,goods.promotion_id)" class="tab_item" v-for="goods in goodsSort" :key='goods.index' ref="tabitem">
       <img :src="goods.thumb" :alt="goods.title"/>
       <p>{{ goods.title }}</p>
       <div class="goods-prices">
         <p><span>￥</span>{{goods.promotion_price}}</p>
         <s class="f12" style="color: #ccc"><span>￥</span>{{goods.attribute_price}}</s>
       </div>
     </li>
    </ul>
  </div>
</template>

<script type="ECMAScript 6">
   import BScroll from 'better-scroll';
    export default {
        name: 'hot-sercher-pay',
        data () {
          return {
          };
        },
        props: {goodsSort: Array},
        methods: {
          selectGood (id, index) {
            console.log(id, index);
            this.$router.push({
              path: 'goodDetail',
              query: {goodId: id, promotionId: index}
            });
          },
          InitTabScroll () {
            let width = 0;
            for (let i = 0; i <= this.goodsSort.length + 1; i++) {
              if (this.$refs.tabitem[0].getBoundingClientRect().width) {
                width += this.$refs.tabitem[0].getBoundingClientRect().width;
              }
            }
            this.$refs.tabWrapper.style.width = width + 'px';
            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.tab, {
                  startX: 0,
                  click: true,
                  scrollX: true,
                  scrollY: false,
                  eventPassthrough: 'vertical',
                  mouseWheel: true
                });
              } else {
                this.scroll.refresh();
              }
            });
          }
        },
        created () {
          this.goodsSort.forEach(good => {
            this.$set(good, 'thumb', this.$store.state.http + good.thumb);
          });
          this.$nextTick(() => {
            this.InitTabScroll();
          });
        }
    };
</script>

<style lang="stylus" scoped>
    .tab
        width 100%
        overflow hidden
        .tab_content
          display: flex
          .tab_item
            flex 0 0 90px; width 90px; margin-right: 15px; padding: 10px 0 ;
           img
             width: 90px; height: 90px; border-radius: 3px
           p:first-of-type
             margin-top: 5px; font-size: 13px; font-weight 500
           .goods-prices
              &>p:last-of-type
                display inline-block; margin-top: 2px; font-size: 15px; color: #F54727; font-weight: 500
              &>p:last-of-type>span
                font-size: 11px;
              &>span
                display inline-block; font-size 11px; color #AEAEAE; text-decoration line-through; text-align center;
</style>
